<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-26 16:56:21
 * @LastEditors: taosong
 * @LastEditTime: 2023-03-27 16:14:39
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>webgl坐标系</title>
    <script src="../libs/index.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        background-color: gray;
      }
      body::after {
        content: ' ';
        display: block;
        width: 1px;
        height: 400px;
        background: red;
        position: absolute;
        left: 199.5px;
        top: 0;
      }
      body::before {
        content: ' ';
        display: block;
        width: 400px;
        height: 1px;
        background: red;
        position: absolute;
        left: 0;
        top: 199.5px;
      }
    </style>
  </head>
  <body>
    <canvas
      width="400"
      height="400"
      id="canvas"
    >
      此浏览器不支持canvas
    </canvas>

    <script>
      /** @type {HTMLCanvasElement} */
      const ctx = document.getElementById('canvas')
      const gl = ctx.getContext('webgl')

      // 创建着色器源码
      // 顶点着色器
      const VERTEX_SHADER_SOURCE = `
        // 必须要存在的main函数
        void main() {
          // 点的位置
          gl_Position = vec4(0.5,0.5, 0.5, 1.0);
          // 点的大小
          gl_PointSize = 30.0;
        }
      `
      // 片元着色器
      const FRAGMENT_SHADER_SOURCE = `
        void main() {
          // 点的颜色
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `
      initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
      // 执行绘制
      // 1要绘制的是什么 从哪个开始  使用几个顶点
      gl.drawArrays(gl.POINTS, 0, 1)
    </script>
  </body>
</html>
